// 定义底部tabbar 的组件
import React, { FC } from 'react'
import { NavBar, TabBar } from 'antd-mobile';

import {
    Route,
    Routes,
    useNavigate,
    useLocation,
    MemoryRouter as Router,
} from 'react-router-dom'

import {
    AppOutline,
    MessageOutline,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'

//引入样式
import '@/assets/css/tabbar.scss';

type Props = {}

export default function TabBarCom({ }: Props) {

    const navigate = useNavigate()
    const location = useLocation()
    const { pathname } = location

    const setRouteActive = (value: string) => {
        navigate(value)
    }

    const tabs = [
        {
            key: '/home',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/car',
            title: '购物车',
            icon: <UnorderedListOutline />,
        },
        {
            key: '/login',
            title: '登录',
            icon: <UserOutline />,
        },
    ]

    return (
        <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
            {tabs.map(item => (
                <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))}
        </TabBar>
    )



}